<template>
  <div class="van-tag-dict" ref="container">
    <div class="title">基础用法</div>
    <div class="normal-tag">
      <van-tag-dict dictType="PERSON_TYPE" :value="value1"></van-tag-dict>
      <van-tag-dict type="success" dictType="PERSON_TYPE" :value="value2"></van-tag-dict>
      <van-tag-dict type="warning" dictType="PERSON_TYPE" :value="value4"></van-tag-dict>
      <van-tag-dict type="danger" dictType="PERSON_TYPE" :value="value5"></van-tag-dict>
    </div>

    <div class="title">使用函数</div>
    <div class="function-tag">
      <van-tag-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value1"></van-tag-dict>
      <van-tag-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value2"></van-tag-dict>
      <van-tag-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value4"></van-tag-dict>
      <van-tag-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value5"></van-tag-dict>
    </div>

    <div class="title">数据自带</div>
    <div class="function-tag">
      <van-tag-dict dictType="PERSON_TYPE" :value="value1"></van-tag-dict>
      <van-tag-dict dictType="PERSON_TYPE" :value="value2"></van-tag-dict>
      <van-tag-dict dictType="PERSON_TYPE" :value="value3"></van-tag-dict>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "001",
      value2: "002",
      value3: "003",
      value4: "004",
      value5: "005"
    }
  },
  methods: {
    //val 为字典数据值
    judgeTypeFun(val) {
      const typeObj = {
        "001": "danger",
        "002": "warning",
        "004": "default",
        "005": "primary"
      }
      return typeObj[val]
    }
  }
}
</script>

<style lang="less" scoped>
.van-tag + .van-tag{
  margin-left: 10px;
}
</style>